<template>
  <view :style="colorStyle">
    <block
      v-for="(item, index, key) in refundinfo"
      :key="key"
      v-if="refundinfo.length !== 0"
    >
      <view class="infobox1">
        <view class="list flex aitems">
          <image :src="item.goods.img" class="img" mode=""></image>
          <view class="block1 flex column between">
            <view class="info1 c1F1F1F f32 fontWeight ellipsis2">
              {{ item.goods.name }}
            </view>
            <!-- <view class="info2 c858585 f24"> 数量：X1 </view> -->
            <view class="info3 c858585 f24">
              {{
                item.goods.goodsSpec
                  .replace(/{/g, "")
                  .replace(/}/, "")
                  .replace(/"/g, "")
              }}
            </view>
          </view>
        </view>
      </view>
      <view class="infobox3">
        <view class="cell flex aitems between">
          <view class="block1 c1F1F1F f32"> 退款现金 </view>
          <view class="block2 cF65B49 f32 fontWeight">
            ¥{{ item.orderPrice }}
          </view>
        </view>
        <!-- <view class="cell flex aitems between">
					<view class="block1 c1F1F1F f32">
						退款余额
					</view>
					<view class="block2 cF65B49 f32 fontWeight">
						¥{{item.deductMoney}}
					</view>
				</view> -->
        <view class="cell flex aitems between">
          <view class="block1 c1F1F1F f32"> 退款积分 </view>
          <view class="block2 cF65B49 f32 fontWeight">
            {{ item.deductIntegral }}积分
          </view>
        </view>
        <view class="cell flex aitems between">
          <view class="block1 c1F1F1F f32"> 件数 </view>
          <view class="block2 c1F1F1F f32">
            <input
              type="number"
              class="f32 c1F1F1F"
              placeholder-class="f32"
              placeholder="请输入退款件数"
              v-model="item.num"
              @blur="inputBlur($event, index)"
            />
          </view>
        </view>
      </view>
      <view class="infobox2">
        <view class="block1 c1F1F1F f32 fontWeight"> 退款说明（必填 </view>
        <view class="block2">
          <textarea
            placeholder="请输入退款说明"
            placeholder-class="c858585 f28"
            class="c1F1F1F f28"
            v-model="item.buyerMsg"
            @input="inputChange($event, index)"
          ></textarea>
        </view>
        <view class="block1 c1F1F1F f32 fontWeight"> 上传凭证（选填）</view>
        <view class="block3 flex aitems wrap">
          <view
            class="img"
            @click="uploadImg(index)"
            v-if="item.img.length < 9"
          >
            <image src="@/static/img40.png" mode=""></image>
          </view>
          <view class="img" v-for="(items, indexs) in item.img" :key="items">
            <image :src="items" mode="aspectFill"></image>
            <image
              src="@/static/img41.png"
              class="close"
              @click="closeImg(index, indexs)"
              mode=""
            ></image>
          </view>
        </view>
      </view>
    </block>

    <view class="infobox4 f32 cfff" @click="save"> 提交申请 </view>

    <view class="" style="height: 100rpx"> </view>
  </view>
</template>

<script>
import { orderRefundApply, putFileOSS } from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import colors from "@/mixins/color";
import { loading, showModal, msg, back, backtime } from "@/utils/wxAPI";
import { getToken, getStorage, setStorage } from "../../utils/storage";
export default {
  mixins: [colors],
  data() {
    return {
      orderinfo: {},
      refundinfo: [],
      options: {},
      num: 1,
    };
  },
  onLoad(options) {
    this.options = options;
    let orderinfo = getStorage("orderinfo");
    let refundinfo = getStorage("refundinfo");
    refundinfo.map((item) => {
      item.buyerMsg = "";
      item.img = [];
      item.num = item.goods.goodsNum - item.refundNum;
    });
    this.orderinfo = orderinfo;
    this.refundinfo = refundinfo;
    console.log(orderinfo);
    console.log(refundinfo);
  },
  methods: {
    async uploadImg(index) {
      uni.chooseImage({
        count: 9 - this.refundinfo[index].img.length,
        success: async (res) => {
          let tempFilePaths = res.tempFilePaths;
          loading();
          for (let i = 0; i < tempFilePaths.length; i++) {
            let { data } = await putFileOSS(tempFilePaths[i]);
            this.refundinfo[index].img.push(data.link);
            if (i == tempFilePaths.length - 1) {
              uni.hideLoading();
            }
          }
        },
      });
    },
    closeImg(index, indexs) {
      this.refundinfo[index].img.splice(indexs, 1);
    },
    inputBlur(e, index) {
      let info = this.refundinfo[index];
      let value = e.detail.value;
      let num = info.goods.goodsNum - info.refundNum;
      if (Number(value) <= 0) {
        this.refundinfo[index].num = num;
        return false;
      }
      if (Number(value) > num) {
        this.refundinfo[index].num = num;
      }
    },

    inputChange(e, index) {
      this.refundinfo[index].buyerMsg = e.detail.value;
    },

    async save() {
      console.log(this.refundinfo);
      for (let i = 0; i < this.refundinfo.length; i++) {
        if (!this.refundinfo[i].buyerMsg) {
          return msg("请输入退款说明");
        }
      }

      for (let i = 0; i < this.refundinfo.length; i++) {
        await this.refundapply(this.refundinfo[i], i);
      }
    },

    async refundapply(item, i) {
      loading();
      let { data } = await orderRefundApply({
        buyerImg: item.img.join(","),
        buyerMsg: item.buyerMsg,
        goodsNum: item.num,
        goodsStatus: this.options.type - 1,
        orderDetailId: item.id,
        orderId: this.orderinfo.id,
        refundType: this.options.type,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        if (i == this.refundinfo.length - 1) {
          msg(data.msg, true);
          setStorage("orderRef", 1);
          backtime();
        }
      }
    },
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #f5f5f5;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #f5f5f5;
}

.infobox1 {
  padding: 32rpx 24rpx 1rpx;
  background: #fff;
  border-radius: 28rpx;
  margin: 30rpx 30rpx 0;

  .list {
    margin: 0 0 30rpx 0;

    .img {
      width: 180rpx;
      height: 180rpx;
      border-radius: 28rpx;
    }

    .block1 {
      height: 160rpx;
      width: calc(100% - 180rpx - 20rpx);
      margin-left: 20rpx;

      .info1 {
      }

      .info2 {
        margin: 16rpx 0;
      }

      .info3 {
      }
    }
  }
}

.infobox2 {
  padding: 32rpx 24rpx 1rpx;
  background: #fff;
  border-radius: 28rpx;
  margin: 30rpx 30rpx 0;

  .block1 {
  }

  .block2 {
    margin: 24rpx 0 32rpx;
    padding: 28rpx 24rpx;
    background: #f5f5f5;
    border-radius: 28rpx;
    height: calc(280rpx - 28rpx - 28rpx);

    textarea {
      width: 100%;
      height: 100%;
    }
  }

  .block3 {
    padding: 24rpx 0;

    .img {
      display: inline-block;
      position: relative;
      margin: 0 20rpx 20rpx 0;

      image {
        width: 183rpx;
        height: 183rpx;
        border-radius: 28rpx;
      }

      .close {
        position: absolute;
        width: 40rpx;
        height: 40rpx;
        z-index: 1;
        top: -10rpx;
        right: -10rpx;
      }
    }
  }
}

.infobox3 {
  padding: 20rpx 24rpx;
  background: #fff;
  border-radius: 28rpx;
  margin: 30rpx 30rpx 0;

  .cell {
    padding: 16rpx 0;

    .block1 {
    }

    .block2 {
      input {
        text-align: right;
      }
    }
  }
}

.infobox4 {
  background: var(--view-theme);
  border-radius: 44rpx;
  margin: 84rpx 30rpx 0;
  padding: 24rpx 0;
  text-align: center;
}
</style>
